<template>
	<view class="productDetails">
		<view class="main">
			<!-- <view class="top_1">
				<view class="">
					<image src="/static/img/index/48.png" mode="widthFix"></image>
					等待买家寄回货物
				</view>
				2024-09-04  15:04:23
			</view> -->
		<!-- 	<view class="des_2">
				填写发货物流信息
				<view class="kd">
					快递公司
					<view class="">
						请选择快递公司
						<image src="/static/img/index/25.png" mode=""></image>
					</view>
				</view>
				<view class="dh">
					快递单号
					<input type="text" placeholder="请输入或扫描快递单号" />
					<image src="/static/img/index/78.png" mode="widthFix"></image>
				</view>
			</view> -->
		<!-- 	<view class="des_1">
				退货物流
				<view class="">
					<view>
						<image src="/static/img/index/83.png" mode="widthFix"></image>
						暂无物流信息
					</view>
					若买家逾期未处理，系统将默认取消该次退款申请
				</view>
			</view> -->
		<!-- 	<view class="negotiation">
				协商记录
				<image src="/static/img/index/25.png" mode="widthFix"></image>
			</view> -->
			<view class="handle">
				<view class="top">
					<view class="topList">
						<view :class="[index<=data.index?'active':'',index<data.index?'active1':'']" class=""
							v-for="(item,index) in 3" :key="index">
							<text></text>
							<view class="" v-if="index != 2">
				
							</view>
						</view>
					</view>
					<view class="topList_1">
						<text>提交申请</text>
						<text>商户处理</text>
						<text>退款成功</text>
					</view>
				</view>
				<view class="des">
					买家已申请换货，请核查后进行处理
					<text>商家同意或超时未处理，系统将退款给您，如果商家拒绝，买家可以修改退款申请后再次发起，商家后重新处理</text>
				</view>
			</view>
			
			<view class="refund">
				退款商品
				<view class="goods">
					<view class="left">
						
					</view>
					<view class="right">
						产品名称
						<text>原有：黑色；S</text>
						<view class="">
							换成：白色；M
							<text>x 1</text>
						</view>
						<text>￥198.00</text>
					</view>
				</view>
			</view>
			<view class="refundInfo">
				<view class="top">
					退款信息
				<!-- 	<view class="right">
						<image src="/static/img/index/82.png" mode="widthFix"></image>
						联系卖家
					</view> -->
				</view>
				<view class="listItem">
					退款原因：
					<view class="">
						不想要了
					</view>
				</view>
				<view class="listItem">
					退款金额：
					<view class="">
						¥198.00
					</view>
				</view>
				<view class="listItem">
					申请时间：
					<view class="">
						2020.12.02 10:10:45
					</view>
				</view>
				<view class="listItem">
					退款编号:
					<view class="">
						74673622822222
						<image src="/static/img/index/81.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="listItem">
					退货地址：
					<view class="">
						张三 13400000000  广东省揭阳市普宁市池尾街道XXXXX
					</view>
				</view>
			</view>
		</view>
		<view class="bot">
			<text>拒绝申请</text>
			<text>同意退款</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {getRefundDetail} from '@/utils/api/goods'
	import { onLoad,onShow } from '@dcloudio/uni-app';
	import {
		reactive,
	} from 'vue';
	const data = reactive<any>({
		index:1,
		httpUrl: getApp().globalData.baseUrl,
	})
	onLoad(({id})=>{
		data.id = id;
	})
	onShow(()=>{
		getRefundDetail({data:{refundNo:data.id}}).then((res)=>{
			console.log(res)
		})
	})
</script>

<style lang="scss">
	.productDetails {
		height: 100vh;
		display: flex;
		background: #F4F6FA;
		flex-direction: column;

		.main {
			flex: 1;
			padding: 24rpx;
			>.top_1{
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				color: #8C8C8C;
				font-size: 24rpx;
				view{
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					image{
						width: 36rpx;
						margin-right: 12rpx;
					}
				}
			}
			>.des_2{
				margin: 16rpx 0;
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;
				>view{
					height: 90rpx;
					padding: 0 10rpx;
					display: flex;
					align-items: center;
					color: #595959;
				}
				.kd{
					border-bottom: 2rpx solid #F4F6FA;
					view{
						margin-left: 48rpx;
						flex: 1;
						display: flex;
						justify-content: space-between;
						image{
							width: 36rpx;
						}
					}
				}
				.dh{
					input{
						flex: 1;
						margin-left: 48rpx;
						height: 100%;
					}
					image{
						width: 30rpx;
					}
				}
			}
			>.des_1{
				margin: 16rpx 0;
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;
				>view{
					padding: 16rpx;
					border-radius: 16rpx;
					background: #F5F5F5;
					margin-top: 24rpx;
					view{
						display: flex;
						margin-bottom: 12rpx;
						align-items: center;
						image{
							width: 48rpx;
							margin-right: 10rpx;
						}
						font-size: 24rpx;
						color: #595959;
					}
				}
			}
			>.negotiation{
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				image{
					width: 36rpx;
				}
			}
			.handle{
				>.top {
					padding: 24rpx;
					border-radius: 24rpx;
					background: #fff;
					font-size: 32rpx;
				
					.topList {
						display: flex;
						padding: 0 40rpx;
				
						>view {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
				
							text {
								width: 18rpx;
								height: 18rpx;
								border-radius: 50%;
								// border: 2rpx solid #6B64D3;
								background: #EFEFEF;
							}
				
							view {
								width: 260rpx;
								height: 3rpx;
								background: #EFEFEF;
							}
						}
				
						.active {
							text {
								background: #6B64D3;
							}
				
						}
				
						.active1 {
							view {
				
								background: #6B64D3;
							}
						}
				
					}
				
					.topList_1 {
						display: flex;
						justify-content: space-between;
						margin-top: 16rpx;
				
						text {
							font-size: 24rpx;
						}
					}
				}
				>.des{
					padding: 24rpx;
					border-radius: 24rpx;
					background: #fff;
					font-size: 32rpx;
					margin:16rpx 0;
					display: flex;
					flex-direction: column;
					text{
						font-size: 24rpx;
						color: #8C8C8C;
						line-height: 1.8;
					}
				}
			}
		
			>.refund{
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;
				.goods{
					display: flex;
					margin-top: 24rpx;
					.left{
						width: 150rpx;
						height: 150rpx;
						background: #ccc;
						margin-right: 24rpx;
					}
					.right{
						flex: 1;
						display: flex;
						flex-direction: column;
						>text:nth-of-type(1){
							color: #8C8C8C;
							margin: 10rpx 0;
						}
						view{
							display: flex;
							justify-content: space-between;
							color: #6B64D3;
						}
						>text:nth-of-type(2){
							color: #EB432F;
							margin: 10rpx 0;
							font-size: 32rpx;
						}
					}
				}
			}
			>.refundInfo{
				border-radius: 24rpx;
				background: #fff;
				padding: 24rpx;
				margin-top: 24rpx;
				.top{
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.right{
						padding: 8rpx 16rpx;
						border-radius: 8rpx;
						color: #1188FF;
						border: 2rpx solid #1188FF;
						display: flex;
						align-items: center;
						image{
							width: 32rpx;
							margin-right: 10rpx;
						}
					}
				}
				.listItem{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #8C8C8C;
					margin-top: 20rpx;
					view{
						display: flex;
						align-items: center;
						flex: 1;
						margin-left: 24rpx;
						justify-content: flex-end;
						text-align: right;
						image{
							width: 27rpx;
							margin-left: 21rpx;
						}
					}
				}
			}
			
		}

		>.bot {
			padding: 18rpx 32rpx 50rpx 0;
			display: flex;
			justify-content: flex-end;
			background: #fff;

			text {
				width: 160rpx;
				line-height: 64rpx;
				text-align: center;
				margin-left: 16rpx;
				border-radius: 64rpx;
			}

			text:nth-of-type(1) {
				border: 2rpx solid #D9D9D9;
			}

			text:nth-of-type(2) {
				color: #fff;
				background: #6B64D3;
			}
		}
	}
</style>